<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_DOM事件监听</title>
</head>
<body>
<button onclick="alert('点击了1')">按钮</button>
<button id="btn">按钮</button>
<h4>这么会主要</h4>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias atque culpa fuga harum illo illum
        iste laborum libero maiores maxime porro, quos, ratione temporibus ullam ut vel, veritatis voluptatem?
    </div>
    <div>Ipsa, quisquam vitae. Accusantium alias aliquid at autem cupiditate dignissimos dolor dolorem ex expedita
        fugit, illo, iure optio quam quia recusandae reiciendis, repellat vero? Asperiores deserunt fugiat illo in
        omnis.
    </div>
    <div>Alias earum laboriosam nesciunt non? At iste laudantium rerum sapiente similique. Aliquid assumenda dignissimos
        earum eum expedita harum inventore, laboriosam maxime natus neque numquam reiciendis. Consectetur corporis eius
        explicabo minus.
    </div>
    <div>Adipisci aliquid, consequatur eos officia pariatur quam quas tenetur unde? Ad aliquam aspernatur, enim eos eum
        laudantium libero magnam necessitatibus, neque odio recusandae voluptate? Aliquam dolorem quis quisquam quod
        totam.
    </div>
    <div>Accusamus architecto assumenda autem consequuntur cum deleniti earum eligendi ex explicabo facilis labore magni
        molestias non officia pariatur porro, sint totam ut vel veritatis! Aperiam illo laborum officiis quam
        voluptatum.
    </div>
    <div>Accusamus alias autem cupiditate dolorum fuga impedit inventore, nam nostrum obcaecati officia optio porro quam
        quas soluta ullam veritatis voluptates? Adipisci assumenda eius eum non quae soluta totam vel voluptatibus!
    </div>
    <div>A ab, aperiam aspernatur consequuntur distinctio doloremque ducimus eius est eveniet expedita harum iusto
        maxime mollitia nesciunt nihil odio possimus quos reiciendis totam unde! Error in quae quod reprehenderit
        tempore?
    </div>
    <div>Accusantium animi aut culpa debitis delectus dolore dolores eaque earum ex excepturi fuga fugiat, illo libero
        maiores minus neque non obcaecati optio porro praesentium quas quia soluta tempora temporibus veniam!
    </div>
    <div>Eum ex iste mollitia nam, quasi quos ratione sed? Autem beatae facere natus nemo optio qui veritatis vero
        voluptas voluptate? Autem distinctio fuga possimus praesentium reprehenderit sapiente temporibus. Ad, sapiente.
    </div>
    <div>Aut corporis doloribus inventore necessitatibus nobis qui suscipit temporibus totam veritatis vero! Autem dicta
        eveniet fuga impedit incidunt laborum quia reiciendis rerum veniam veritatis. Doloribus impedit natus neque
        similique veritatis.
    </div>
    <div>Culpa cupiditate delectus facere fugit impedit ipsa, pariatur reiciendis voluptatibus? At dignissimos eligendi
        enim est ex excepturi explicabo ipsum nisi optio porro provident ratione repudiandae sequi sint, veritatis vitae
        voluptates.
    </div>
    <div>At doloremque eaque exercitationem harum illo laudantium nulla omnis porro repudiandae sunt. Accusamus dolore
        eaque impedit in nemo quae quaerat, quas quasi sapiente sequi ut, vel voluptas voluptates! Laborum, voluptatem.
    </div>
    <div>Adipisci at cupiditate deserunt dignissimos dolorem eos facilis laborum libero necessitatibus, nostrum quod
        reiciendis sed sint tempora voluptate? Ad exercitationem incidunt ipsa itaque magnam nihil perferendis sapiente
        totam veniam veritatis.
    </div>
    <div>Beatae corporis cupiditate, facilis incidunt obcaecati reprehenderit sit ut! Aliquid architecto atque illo
        illum iure libero nemo odio quae quaerat repellat? Ab consequuntur cum cupiditate excepturi facilis illo in
        magnam?
    </div>
    <div>Aperiam assumenda consequatur in incidunt maxime neque similique tenetur velit. Cum dolore ea earum enim
        excepturi facere, fuga hic id libero nemo neque, praesentium quam, quisquam ratione temporibus vero voluptates.
    </div>
    <div>A accusantium culpa doloremque enim eum fugit hic iure magni molestiae mollitia neque nulla officiis pariatur
        perferendis quam quasi quidem quisquam reprehenderit sapiente, sed sequi similique suscipit tenetur, totam
        veniam?
    </div>
    <div>Ipsam, maiores, nostrum? Aliquid assumenda blanditiis commodi consequatur culpa, delectus enim error ex
        exercitationem, laudantium modi, molestias mollitia natus neque provident quas quasi quia repudiandae saepe
        soluta tenetur voluptas voluptatibus.
    </div>
    <div>Accusamus, adipisci atque culpa dicta dolorem ea eligendi impedit in laborum modi nam, nisi non nostrum numquam
        obcaecati officia perspiciatis provident quibusdam reprehenderit repudiandae saepe sint soluta tempore ut vel!
    </div>
    <div>Aliquid cum earum eum hic id labore magnam magni nemo non possimus quae quidem repellat, sunt? A, beatae
        commodi culpa eius facere ipsa nulla omnis perferendis praesentium saepe, voluptas voluptates?
    </div>
    <div>Ab ex exercitationem minima, odio omnis quam rem sed tempora? Debitis, molestias vitae? Alias aliquid culpa,
        eum excepturi fugiat impedit necessitatibus nulla quidem recusandae velit. Cumque nemo sed tempore velit?
    </div>
</div>
<script>
    /*window 对象 是 浏览器的内置的全局对象 代表了当前的浏览器窗口*/
    window.addEventListener('resize',function (){
        //alert('窗口被改变大小了')
    })
    window.addEventListener('scroll',function (){
        alert('窗口被滚动了')
    })


    let btnE = document.querySelector('#btn');
    btnE.addEventListener('click',function (){
        alert('点击了2')
    })
    let h4E = document.querySelector('h4');
    h4E.addEventListener('click',function (){
        console.log('标题被查看了');
    })



</script>
</body>
</html>